<template>
  <!-- 项目经营-支出主页面 4-5 -->
  <div class="table-wrap">
    <div class="table-top">
      <router-link to="/expenditureAdd">
        <a-button type="primary" class="buttonColorGreen addButton ml10 mr10">新增</a-button>
      </router-link>
      <a-input-search placeholder="请输入内容" v-model="search" class="search" @search="onSearch" />
      <a-button type="primary" class="buttonColorGreen ml10 mr10">查询</a-button>
      <a-button type="primary" class="buttonColorGreen ml10 mr10" @click="reset">重置</a-button>
    </div>

    <a-form :form="form" layout="inline" class="form">
      <a-form-item label="招标费总计" :label-col="{ span:9 }" :wrapper-col="{ span: 10 }">
        <a-input placeholder="请输入" />
      </a-form-item>
      <a-form-item label="人力成本总计" :label-col="{ span:9 }" :wrapper-col="{ span: 10 }">
        <a-input placeholder="请输入" />
      </a-form-item>
      <a-form-item label="差旅费总计" :label-col="{ span:9 }" :wrapper-col="{ span: 10 }">
        <a-input placeholder="请输入" />
      </a-form-item>
      <a-form-item label="管理费总计" :label-col="{ span:9 }" :wrapper-col="{ span: 10 }">
        <a-input placeholder="请输入" />
      </a-form-item>
      <a-form-item label="运维费总计" :label-col="{ span:9 }" :wrapper-col="{ span: 10 }">
        <a-input placeholder="请输入" />
      </a-form-item>
      <a-form-item label="外协费总计" :label-col="{ span:9 }" :wrapper-col="{ span: 10 }">
        <a-input placeholder="请输入" />
      </a-form-item>
      <a-form-item label="税费总计" :label-col="{ span:9 }" :wrapper-col="{ span: 10 }">
        <a-input placeholder="请输入" />
      </a-form-item>
      <a-form-item label="其他总计" :label-col="{ span:9 }" :wrapper-col="{ span: 10 }">
        <a-input placeholder="请输入" />
      </a-form-item>
    </a-form>

    <div class="table">
      <a-table :columns="columns" :dataSource="tableData" bordered>
        <span slot="operation">
          <router-link to="/checkinAdd" class="actionButton">
            <a-icon type="check-circle" />修改</router-link>
          <a-divider type="vertical" />
          <span class="actionButton">
            <a-icon type="close" />删除</span>
        </span>
      </a-table>
    </div>
  </div>
</template>

<script>
const columns = [{   //表格表头
  title: '序号',
  dataIndex: 'number',
  scopedSlots: { customRender: 'number' },
},
{
  title: '编号',
  dataIndex: 'objectNum',
},{
  title: '日期',
  dataIndex: 'checkinTime',
}, {
  title: '类别',
  dataIndex: 'InvoiceCode',
},{
  title: '内容',
  dataIndex: 'objectType',
},
{
  title: '金额',
  dataIndex: 'money',
},{
  title: '相关人',
  dataIndex: 'InvoiceNumber',
},
{
  title: '备注',
  dataIndex: 'customUnit',
},
{
  title: '',
  // dataIndex: 'operation',
  scopedSlots: { customRender: 'operation' },
}
];

const tableData = [//表格数据
  {
    number: '1',
    objectNum: '￥300,000.00',
    InvoiceCode: '管理费',
    InvoiceNumber: '张三，李四，王五',
    checkinTime: '2019-04-15',
    money: '100.000',
    objectType: '2019-04-15',
    customUnit: ''
  },
  {
    number: '2',
    objectNum: '￥1,256,000.00',
    InvoiceCode: '管理费',
    InvoiceNumber: '张三',
    checkinTime: '2019-04-15',
    money: '100.000',
    objectType: '2019-04-15',
    customUnit: ''
  },
  {
    number: '3',
    objectNum: '￥120,000.00',
    InvoiceCode: '管理费',
    InvoiceNumber: '张三',
    checkinTime: '2019-04-15',
    money: '100.000',
    objectType: '2019-04-15',
    customUnit: ''
  }
];

export default {
  data() {
    return {
      tableData,
      columns,
      search: '',
      form: this.$form.createForm(this)
    }
  },
  methods: {
    onSearch() {   //搜索

    },
    onDelete(key) {  //删除
      const dataSource = [...this.dataSource]
      this.dataSource = dataSource.filter(item => item.key !== key)
    },
    reset() {  //重置
      this.search = ""
    }
  }
}
</script>
<style scoped>
.ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
  padding: 12px 16px !important;
}
.form {
  margin: 0 0 20px 10px;
}
>>>.ant-form-item-label {
  width: 100px;
}
.ant-form-inline .ant-form-item{
  margin-right: -35px;
}
</style>
